<template>
  <div class="home">
    <!-- 返回顶部按钮 -->
    <el-backtop :right="100" :bottom="100" />
    <el-container>
      <el-main>
        <!-- 所有项目展示 -->
        <show-projects></show-projects>
      </el-main>
      <el-aside width="500px" class="aside">
        <!-- 精选项目展示 -->
        <perfect-projects :exceProjects="exceProjects(allProjects)" />
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import {  mapState} from 'vuex'
import ShowProjects from '@/components/ShowProjects.vue'
import PerfectProjects from '@/components/PerfectProjects.vue'
export default {
  components: { ShowProjects, PerfectProjects },
  computed: {
    ...mapState('AllProject',['allProjects']),
  },
  methods:{
    exceProjects(allProjects){
      return allProjects.slice(0,6)
    },
  }
}
</script>

<style scoped>
.home{
  background-color: #e1e1e1;
}
.el-container {
  margin-left:100px;
  margin-right:100px;
}
</style>